<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理课程</title>
    <script src="js/base.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        h1, h6 {
            text-align: center;
            color: #333;
        }
        h1 span {
            color: #007BFF;
            font-weight: bold;
        }
        table {
            width: 100%;
            max-width: 900px;
            margin: 20px auto;
            border-collapse: collapse;
            text-align: center;
        }
        th, td {
            padding: 10px;
            border: 1px solid #ddd;
        }
        th {
            background-color: #007BFF;
            color: white;
        }
        td a {
            color: #FF5722;
            text-decoration: none;
            font-weight: bold;
        }
        td a:hover {
            text-decoration: underline;
        }
        #buttons {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }
        button {
            padding: 8px 15px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        .score-input {
            width: 60px;
            padding: 5px;
            text-align: center;
            border: 1px solid #ddd;
            border-radius: 3px;
        }
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            align-items: center;
            justify-content: center;
        }
        .modal-content {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            width: 300px;
            text-align: center;
        }
        .modal-buttons {
            margin-top: 20px;
            display: flex;
            gap: 10px;
            justify-content: center;
        }
        .edit-btn {
            color: #007BFF;
        }
    </style>
</head>
<body>
<h1>管理课程号为<span id="courseId"></span>的课程选课情况</h1>
<h6>当前<span id="stuCount"></span>人，容量<span id="maxLimit"></span>人。</h6>
<table border="1px" id="students">
    <tr>
        <td>学号</td>
        <td>学生用户名</td>
        <td>成绩</td>
        <td>操作</td>
    </tr>

</table>
<div id="buttons"></div>

<!-- 编辑弹窗 -->
<div class="modal" id="editModal">
    <div class="modal-content">
        <h3>编辑学生信息</h3>
        <input type="hidden" id="modalStuId">
        <input type="hidden" id="modalIndex">
        <p>
            <label>成绩：</label>
            <input type="number" min="0" max="100" class="score-input" id="modalScoreInput">
        </p>
        <div class="modal-buttons">
            <button onclick="saveScore()">保存成绩</button>
            <button onclick="deleteStudent()">删除选课</button>
            <button onclick="closeModal()">取消</button>
        </div>
    </div>
</div>

<script>
    let courseId = localStorage.getItem("managerCourseId");
    let stuCount = localStorage.getItem("stuCount");
    let maxLimit = localStorage.getItem("maxLimit");
    document.getElementById("courseId").innerHTML = courseId;
    document.getElementById("stuCount").innerHTML = stuCount;
    document.getElementById("maxLimit").innerHTML = maxLimit;

    let pageNo = 1;
    let pageSize = 5;
    let pageCount = 0;
    let arr = null;
    let editModal = document.getElementById("editModal");

    function loadData() {
        let url = "http://localhost:8080/teacher/pageByCourseId?pageNo=" + pageNo + "&pageSize=" + pageSize + "&courseId=" + courseId;
        $.rest(url, "get", null, function (r) {
            if (r.code == 200) {
                arr = r.data.data;
                pageCount = r.data.pageCount;
                let studentsInnerHTML = "<tr>\n" +
                    "        <td>学号</td>\n" +
                    "        <td>学生用户名</td>\n" +
                    "        <td>成绩</td>\n" +
                    "        <td>操作</td>\n" +
                    "    </tr>";
                for (let i = 0; i < arr.length; i++) {
                    let item = arr[i];
                    // 成绩栏仅展示成绩，默认为空时显示"未录入"
                    let scoreDisplay = item.score !== null && item.score !== undefined ? item.score : "未录入";

                    studentsInnerHTML += "<tr>" +
                        "<td>" + item.id + "</td>" +
                        "<td>" + item.name + "</td>" +
                        "<td>" + scoreDisplay + "</td>" +
                        "<td><a href='#' class='edit-btn' onclick='return openEditModal(" + i + ")'>编辑</a></td>" +
                        "</tr>";
                }
                document.getElementById("students").innerHTML = studentsInnerHTML;

                let buttonsInnerHTML = "";
                if (pageCount > 0) {
                    buttonsInnerHTML = "<button onclick='onPrevClick();'>上一页</button>";
                    for (let i = 0; i < pageCount; i++) {
                        buttonsInnerHTML += "<button onclick='onPageClick(" + (i + 1) + ")'>" + (i + 1) + "</button>";
                    }
                    buttonsInnerHTML += "<button onclick='onNextClick();'>下一页</button>";
                }
                document.getElementById("buttons").innerHTML = buttonsInnerHTML;
            }
        });
    }
    loadData();

    function onPageClick(pNo) {
        pageNo = pNo;
        loadData();
    }

    function onPrevClick() {
        if (pageNo == 1) return;
        pageNo--;
        loadData();
    }

    function onNextClick() {
        if (pageNo == pageCount) return;
        pageNo++;
        loadData();
    }

    // 打开编辑弹窗
    function openEditModal(index) {
        let item = arr[index];
        document.getElementById("modalStuId").value = item.id;
        document.getElementById("modalIndex").value = index;
        // 填充当前成绩到输入框
        document.getElementById("modalScoreInput").value = item.score || "";
        editModal.style.display = "flex";
        return false;
    }

    // 关闭弹窗
    function closeModal() {
        editModal.style.display = "none";
    }

    // 保存成绩
    function saveScore() {
        let stuId = document.getElementById("modalStuId").value;
        let score = document.getElementById("modalScoreInput").value.trim();

        if (!score || isNaN(score) || score < 0 || score > 100) {
            alert("请输入有效的成绩（0-100）");
            return;
        }

        let url = `http://localhost:8080/teacher/saveScore?stuId=${stuId}&courseId=${courseId}&score=${score}`;
        $.rest(url, "get", null, function (r) {
            if (r.code == 200) {
                alert("成绩保存成功");
                closeModal();
                loadData(); // 重新加载数据刷新页面
            } else {
                alert("成绩保存失败");
            }
        });
    }

    // 删除选课
    function deleteStudent() {
        if (!confirm("确定要删除该学生的选课记录吗？")) {
            return;
        }

        let stuId = document.getElementById("modalStuId").value;
        let url = "http://localhost:8080/teacher/delStudentWithCourse?stuId=" + stuId + "&courseId=" + courseId;
        $.rest(url, "get", null, function (r) {
            if (r.code == 200) {
                alert("删除成功");
                document.getElementById("stuCount").innerHTML = parseInt(document.getElementById("stuCount").innerHTML) - 1;
                closeModal();
                loadData();
                window.location.href = "teacherIndex.html";
            }
        });
    }

    // 点击弹窗外部关闭弹窗
    window.onclick = function(event) {
        if (event.target == editModal) {
            closeModal();
        }
    }
</script>

</body>
</html>